<template>
	<view class="container">
		<view class="header">
			<view class="user-info">
				<view class="avatar-container" @click="chooseAvatar">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="edit-icon">
						<text class="iconfont icon-edit"></text>
					</view>
				</view>
				<view class="user-details">
					<view class="username">{{ userInfo.nickname }}</view>
					<view class="user-id">ID: {{ userInfo.userId }}</view>
				</view>
			</view>
		</view>

		<view class="main-content">
			<!-- 用户信息设置 -->
			<view class="section">
				<view class="section-title">个人信息</view>
				<view class="menu-list">
					<view class="menu-item" @click="editUserInfo('nickname')">
						<view class="item-left">
							<text class="iconfont icon-user"></text>
							<text class="item-title">昵称</text>
						</view>
						<view class="item-right">
							<text class="item-value">{{ userInfo.nickname }}</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item" @click="editUserInfo('phone')">
						<view class="item-left">
							<text class="iconfont icon-phone"></text>
							<text class="item-title">手机号码</text>
						</view>
						<view class="item-right">
							<text class="item-value">{{ formatPhone(userInfo.phone) }}</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item" @click="editUserInfo('gender')">
						<view class="item-left">
							<text class="iconfont icon-gender"></text>
							<text class="item-title">性别</text>
						</view>
						<view class="item-right">
							<text class="item-value">{{ genderText[userInfo.gender] }}</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的内容 -->
			<view class="section">
				<view class="section-title">我的内容</view>
				<view class="menu-list">
					<view class="menu-item" @click="navigateTo('/pages/my_orders/my_orders')">
						<view class="item-left">
							<text class="iconfont icon-order"></text>
							<text class="item-title">我的订单</text>
						</view>
						<view class="item-right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item" @click="navigateTo('/pages/my_favorites/my_favorites')">
						<view class="item-left">
							<text class="iconfont icon-favorite"></text>
							<text class="item-title">我的收藏</text>
						</view>
						<view class="item-right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item" @click="navigateTo('/pages/my_reviews/my_reviews')">
						<view class="item-left">
							<text class="iconfont icon-comment"></text>
							<text class="item-title">我的评价</text>
						</view>
						<view class="item-right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 通用设置 -->
			<view class="section">
				<view class="section-title">通用设置</view>
				<view class="menu-list">
					<view class="menu-item" @click="navigateTo('/pages/address/address')">
						<view class="item-left">
							<text class="iconfont icon-location"></text>
							<text class="item-title">地址管理</text>
						</view>
						<view class="item-right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item">
						<view class="item-left">
							<text class="iconfont icon-notification"></text>
							<text class="item-title">消息通知</text>
						</view>
						<view class="item-right">
							<switch :checked="notificationEnabled" @change="toggleNotification" color="#07C160" />
						</view>
					</view>
					<view class="menu-item" @click="clearCache">
						<view class="item-left">
							<text class="iconfont icon-delete"></text>
							<text class="item-title">清除缓存</text>
						</view>
						<view class="item-right">
							<text class="item-value">{{ cacheSize }}MB</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 关于和帮助 -->
			<view class="section">
				<view class="section-title">关于和帮助</view>
				<view class="menu-list">
					<view class="menu-item" @click="navigateTo('/pages/help/help')">
						<view class="item-left">
							<text class="iconfont icon-help"></text>
							<text class="item-title">帮助中心</text>
						</view>
						<view class="item-right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item" @click="navigateTo('/pages/feedback/feedback')">
						<view class="item-left">
							<text class="iconfont icon-feedback"></text>
							<text class="item-title">意见反馈</text>
						</view>
						<view class="item-right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="menu-item" @click="navigateTo('/pages/about/about')">
						<view class="item-left">
							<text class="iconfont icon-info"></text>
							<text class="item-title">关于我们</text>
						</view>
						<view class="item-right">
							<text class="item-value">v1.0.0</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="logout-button" @click="logout">退出登录</view>
		</view>

		<!-- 底部导航 -->
		<!-- <view class="tab-bar">
			<view class="tab-item" @click="navigateTo('/pages/index/index')">
				<text class="iconfont icon-home"></text>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/my_orders/my_orders')">
				<text class="iconfont icon-order"></text>
				<text class="tab-text">订单</text>
			</view>
			<view class="tab-item active">
				<text class="iconfont icon-user"></text>
				<text class="tab-text">我的</text>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				userId: '10086123',
				nickname: '摄影爱好者',
				avatar: 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg',
				phone: '13812345678',
				gender: 1 // 0: 未设置, 1: 男, 2: 女
			},
			genderText: ['未设置', '男', '女'],
			notificationEnabled: true,
			cacheSize: '12.6'
		};
	},
	onLoad() {
		// 加载用户信息
		this.loadUserInfo();
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			// 实际应用中应从服务器获取用户信息
			console.log('加载用户信息');
		},

		// 选择头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 这里只是模拟，实际应用中应该上传图片到服务器
					this.userInfo.avatar = res.tempFilePaths[0];
					uni.showToast({
						title: '头像已更新',
						icon: 'success'
					});
				}
			});
		},

		// 编辑用户信息
		editUserInfo(type) {
			switch (type) {
				case 'nickname':
					uni.showModal({
						title: '修改昵称',
						editable: true,
						placeholderText: '请输入新昵称',
						content: this.userInfo.nickname,
						success: (res) => {
							if (res.confirm && res.content) {
								this.userInfo.nickname = res.content;
								uni.showToast({
									title: '昵称已更新',
									icon: 'success'
								});
							}
						}
					});
					break;
				case 'phone':
					uni.showModal({
						title: '修改手机号',
						content: '确定要修改绑定的手机号码吗？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/verify_phone/verify_phone'
								});
							}
						}
					});
					break;
				case 'gender':
					uni.showActionSheet({
						itemList: ['男', '女'],
						success: (res) => {
							this.userInfo.gender = res.tapIndex + 1;
							uni.showToast({
								title: '性别已更新',
								icon: 'success'
							});
						}
					});
					break;
			}
		},

		// 格式化手机号
		formatPhone(phone) {
			if (!phone) return '';
			return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		},

		// 导航到指定页面
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},

		// 切换通知设置
		toggleNotification(e) {
			this.notificationEnabled = e.detail.value;
			uni.showToast({
				title: this.notificationEnabled ? '已开启通知' : '已关闭通知',
				icon: 'none'
			});
		},

		// 清除缓存
		clearCache() {
			uni.showModal({
				title: '清除缓存',
				content: '确定要清除应用缓存吗？',
				success: (res) => {
					if (res.confirm) {
						// 实际应用中应该清除本地缓存数据
						setTimeout(() => {
							this.cacheSize = '0.0';
							uni.showToast({
								title: '缓存已清除',
								icon: 'success'
							});
						}, 500);
					}
				}
			});
		},

		// 退出登录
		logout() {
			uni.showModal({
				title: '退出登录',
				content: '确定要退出当前账号吗？',
				success: (res) => {
					if (res.confirm) {
						// 实际应用中应该清除用户登录状态
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});

						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 50px;
}

/* 头部用户信息 */
.header {
	background-color: $primary-color;
	padding: 40px 20px 30px;
	position: relative;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar-container {
	position: relative;
	margin-right: 15px;
}

.avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.3);
}

.edit-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.edit-icon .iconfont {
	font-size: 14px;
	color: $primary-color;
}

.user-details {
	color: #fff;
}

.username {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 5px;
}

.user-id {
	font-size: 14px;
	opacity: 0.8;
}

/* 主要内容区域 */
.main-content {
	padding: 15px;
}

.section {
	margin-bottom: 15px;
}

.section-title {
	font-size: 14px;
	color: $light-text;
	margin-bottom: 8px;
	padding-left: 5px;
}

.menu-list {
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	position: relative;
}

.menu-item:after {
	content: '';
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;
	height: 1px;
	background-color: $border-color;
}

.menu-list .menu-item:last-child:after {
	display: none;
}

.item-left {
	display: flex;
	align-items: center;
}

.item-left .iconfont {
	margin-right: 10px;
	font-size: 18px;
	color: $primary-color;
	width: 20px;
	text-align: center;
}

.item-title {
	font-size: 15px;
}

.item-right {
	display: flex;
	align-items: center;
	color: $light-text;
}

.item-value {
	font-size: 14px;
	margin-right: 5px;
}

.item-right .iconfont {
	font-size: 14px;
}

/* 退出登录按钮 */
.logout-button {
	margin: 30px 15px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	background-color: #fff;
	border-radius: 22px;
	font-size: 16px;
	color: #ff4d4f;
	font-weight: 500;
}

/* 底部导航 */
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	background-color: #fff;
	display: flex;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.tab-item .iconfont {
	font-size: 20px;
	margin-bottom: 2px;
	color: #999;
}

.tab-item .tab-text {
	font-size: 12px;
	color: #999;
}

.tab-item.active .iconfont,
.tab-item.active .tab-text {
	color: $primary-color;
}

/* iconfont */
.icon-user:before {
	content: '\e7ae';
}

.icon-phone:before {
	content: '\e7e3';
}

.icon-gender:before {
	content: '\e61b';
}

.icon-order:before {
	content: '\e63f';
}

.icon-favorite:before {
	content: '\e7df';
}

.icon-comment:before {
	content: '\e6a7';
}

.icon-location:before {
	content: '\e7e1';
}

.icon-notification:before {
	content: '\e6bc';
}

.icon-delete:before {
	content: '\e7c3';
}

.icon-help:before {
	content: '\e752';
}

.icon-feedback:before {
	content: '\e866';
}

.icon-info:before {
	content: '\e7d2';
}

.icon-edit:before {
	content: '\e7a1';
}

.icon-arrow-right:before {
	content: '\e665';
}

.icon-home:before {
	content: '\e7c6';
}
</style>
